<template>
	<div id="app">
		<el-row class="tac">
			<el-col :span="6">
				<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-s-unfold"></i>
							<span>收起</span>
						</template>
						<!-- 首页 -->
						<el-submenu index="1-1">
							<template slot="title">
								<i class="el-icon-s-home"></i>
								<span>首页</span>
							</template>
							<el-menu-item index="1-1-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 商品 -->
						<el-submenu index="1-2">
							<template slot="title">
								<i class="el-icon-s-goods"></i>
								<span>商品</span>
							</template>
							<el-submenu index="1-2-1">
								<template slot="title">
									<span>商品管理</span>
								</template>
								<el-menu-item index="1-2-1-1">编辑商品信息</el-menu-item>
								<el-menu-item index="1-2-1-2">商品库</el-menu-item>
								<el-menu-item index="1-2-1-3">门店商品</el-menu-item>
							</el-submenu>
							<el-submenu index="1-2-2">
								<template slot="title">
									<span>发布商品</span>
								</template>
								<el-menu-item index="1-2-2-1">发布商品</el-menu-item>
							</el-submenu>
							<el-submenu index="1-2-3">
								<template slot="title">
									<span>商品分类</span>
								</template>
								<el-menu-item index="1-2-3-1">添加分类</el-menu-item>
								<el-menu-item index="1-2-3-1">商品分类</el-menu-item>
								<el-menu-item index="1-2-3-1">编辑分类</el-menu-item>
								<el-menu-item index="1-2-3-1">管理分类</el-menu-item>
								<el-menu-item index="1-2-3-1">分类-查看商品</el-menu-item>
								<el-menu-item index="1-2-3-1">分类选品</el-menu-item>
							</el-submenu>
							<el-submenu index="1-2-4">
								<template slot="title">
									<span>品牌管理</span>
								</template>
								<el-menu-item index="1-2-4-1">添加品牌</el-menu-item>
								<el-menu-item index="1-2-4-1">编辑品牌</el-menu-item>
								<el-menu-item index="1-2-4-1">品牌管理</el-menu-item>
							</el-submenu>
						</el-submenu>
						<!-- 店铺 -->
						<el-submenu index="1-3">
							<template slot="title">
								<i class="el-icon-s-shop"></i>
								<span>店铺</span>
							</template>
							<el-menu-item index="1-3-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 订单 -->
						<el-submenu index="1-4">
							<template slot="title">
								<i class="el-icon-collection-tag"></i>
								<span>订单</span>
							</template>
							<el-menu-item index="1-4-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 客户 -->
						<el-submenu index="1-5">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span>客户</span>
							</template>
							<el-menu-item index="1-5-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 营销玩法 -->
						<el-submenu index="1-6">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>营销玩法</span>
							</template>
							<el-menu-item index="1-6-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 设置 -->
						<el-submenu index="1-7">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>设置</span>
							</template>
							<el-menu-item index="1-7-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 权限 -->
						<el-submenu index="1-8">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>设置</span>
							</template>
							<el-menu-item index="1-8-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 内容管理 -->
						<el-submenu index="1-9">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>内容管理</span>
							</template>
							<el-menu-item index="1-9-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 素材服务 -->
						<el-submenu index="1-10">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>素材服务</span>
							</template>
							<el-menu-item index="1-10-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 销售渠道 -->
						<el-submenu index="1-11">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>销售渠道</span>
							</template>
							<el-menu-item index="1-11-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 店铺装修 -->
						<el-submenu index="1-12">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>店铺装修</span>
							</template>
							<el-menu-item index="1-12-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 日志 -->
						<el-submenu index="1-13">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>日志</span>
							</template>
							<el-menu-item index="1-13-1">选项1</el-menu-item>
						</el-submenu>
						<!-- 数据分析 -->
						<el-submenu index="1-14">
							<template slot="title">
								<i class="el-icon-ice-cream-round"></i>
								<span>数据分析</span>
							</template>
							<el-menu-item index="1-14-1">选项1</el-menu-item>
						</el-submenu>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-row>
		<!-- <router-view /> -->
	</div>
</template>
<script>
	export default {
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style lang="scss">
	nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}
</style>
